<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>注册</title>
  <!-- Bootstrap core CSS-->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom fonts for this template-->
  <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <!-- Custom styles for this template-->
  <link href="css/sb-admin.css" rel="stylesheet">
</head>

<body class="bg-dark">
  <div class="container">
    <div class="card card-register mx-auto mt-5">
      <div class="card-header">注册一个账号</div>
      <div class="card-body">
        <form>
          <div class="form-group">
            <div class="form-row">
              <div class="col-md-12">
                <label for="username">用户名</label>
                <input class="form-control" id="username" type="text" aria-describedby="nameHelp" placeholder="Enter first name">
                <div id="msg" style="color: blue;"></div>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="usertel">手机号</label>
            <input class="form-control" id="usertel" type="text" aria-describedby="emailHelp" placeholder="phonenumber" required="required">
            <div id="msg1" style="color: blue;"></div>
          </div>
          <div class="form-group">
            <div class="form-row">
              <div class="col-md-6">
                <label for="password">密码</label>
                <input class="form-control" id="password" type="password" placeholder="Password" required="required">
                <div id="msg2" style="color: blue;"></div>
              </div>
              <div class="col-md-6">
                <label for="password2">确认密码</label>
                <input class="form-control" id="password2" type="password" placeholder="Confirm password" required="required">
                <div id="msg3" style="color: blue;"></div>
              </div>
            </div>
          </div>
          <!--<a class="btn btn-primary btn-block" href="login.html">Register</a>-->
          <button class="btn  btn-block" style="background: #00f;color:#fff">注册</button>
        </form>
        <div class="text-center">
          <a class="d-block small mt-3" href="login.html">登陆页面</a>
          <a class="d-block small" href="forgot-password.html">忘记密码？</a>
        </div>
      </div>
    </div>
  </div>
  <!-- Bootstrap core JavaScript-->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/popper/popper.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
  <!-- Core plugin JavaScript-->
  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
<script type="text/javascript">
	$(function(){
		var username = $('#username').val();
		var usertel = $('#usertel').val();
		var password = $('#password').val();
		var password2 = $('#password2').val();
		//用户名验证
		var user = /^[a-zA-Z0-9]{4,15}$/;
		$('#username').on('blur', function(){
			if(user.test($('#username').val())){
			$('#msg').html('用户名正确')
		}else{
			$('#msg').html('用户名错误')
		}
		})
		$('username').focus(function(){
			$('#msg').html('')
		})
		//手机号认证
		var user1 = /^1\d{10}$/;
		$('#usertel').on('blur', function(){
			if(user1.test($('#usertel').val())){
			$('#msg1').html('手机号正确')
		}else{
			$('#msg1').html('手机号错误')
		}
		})
		$('usertel').focus(function(){
			$('#msg1').html('')
		})
		//密码验证
		var pas = /^[a-zA-Z0-9]{4,15}$/;
		$('#password').on('blur', function(){
			if(pas.test($('#password').val())){
			$('#msg2').html('密码正确')
		}else{
			$('#msg2').html('密码错误')
		}
		})
		$('password').focus(function(){
			$('#msg2').html('')
		})
		
		$('#password2').on('blur', function(){
//			console.log($('#password').val() == $('#password2').val())
			if($('#password').val() == $('#password2').val()){
			$('#msg3').html('两次密码一致')
		}else{
			$('#msg3').html('两次密码不正确')
		}
		})
		$('password2').focus(function(){
			$('#msg3').html('')
		})
		
		$('.btn').on('click',function(){
	
			var username = $('#username').val();
			var usertel = $('#usertel').val();
			var password = $('#password').val();
			$.ajax({
				type:"get",
				url:"http://localhost:3000/register/reg",
				data:{
					username:username,
					usertel:usertel,
					password:password
				},
				success:function(data){
					if(data == "1"){
						window.location.href = "index.html";
					}else{
						window.location.href = "login.html";
					}
				}
				
			});
		})
		
		
		
	})
</script> 
</html>
